<template>
  <div>
    <div class="chartbox">
      <div class='echart-brand'>
        <div id='color-charts' ref="stockcolors" style='width:96%;height:96%'></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"stockColor",
    props:['stockColor','mark'],
    watch:{
      stockColor(){
        this.renderCharts(this.stockColor);
      }
    },
    methods:{
      renderCharts(data){
        const brandCharts = this.$echarts.init(this.$refs['stockcolors']);
        const option = {
          title:{
            text:this.mark==='in'?'库存外观颜色':'出库外观颜色',
            textStyle: {
              color: '#00dcde',
              fontSize: 16,
            },
            left: 10,
            top: 10
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name:'库存外观颜色',
              type:'pie',
              center:['55%','52%'],
              avoidLabelOverlap: false,
              calculable:false,
              label: {
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30'
                  }
                }
              },
              labelLine: {
                normal:{
                  show: true
                }
              },
              itemStyle:{
                borderWidth:0
              },
              data:data
            }
          ],
          color:this.getChartColor(data)
        };
        brandCharts.setOption(option)
      },
      getChartColor(data){
        var arr = [];
        for(var i=0;i<data.length;i++){
          arr.push(data[i].name)
        }
        for(var i=0;i<arr.length;i++){
          if(arr[i]=='黑色'){
            arr[i] = '#404040';
          }else if(arr[i]=='红色'){
            arr[i] = '#FF604D';
          }else if(arr[i]=='黄色'){
            arr[i] = '#F0BD26';
          }else if(arr[i]=='蓝色'){
            arr[i] = '#088BEB';
          }else if(arr[i]=='绿色'){
            arr[i] = '#0EC49E';
          }else if(arr[i]=='白色'){
            arr[i] = '#ffffff';
          }else if(arr[i]=='银色'){
            arr[i] = '#d9d9d9';
          }else if(arr[i]=='灰色'){
            arr[i] = '#737373';
          }else if(arr[i]=='香槟色'){
            arr[i] = '#C6A35E';
          }else if(arr[i]=='棕色'){
            arr[i] = '#8F5500';
          }else if(arr[i]=='紫色'){
            arr[i] = '#b653e5';
          }else if(arr[i]=='橙色'){
            arr[i] = '#fe9000';
          }else{
            arr[i] = '#00dcde';
          }
        }
        return arr
      }

    }
  }
</script>

